<template>
  <el-dialog :visible.sync="visible" :close-on-click-modal="false">
    <el-alert
    :closable="false"
    title="费用将扣除当前管理员余额"
    type="error">
  </el-alert>
    <el-tabs type="border-card">
      <el-tab-pane label="续费" name="first"></el-tab-pane>
      <el-form
        :model="dataForm"
        ref="dataForm"
        @keyup.enter.native="dataFormSubmit()"
        label-width="100px"
      >
        <el-form-item label="管理员:" prop="username">
          <p>{{dataForm.username}}</p>
        </el-form-item>
        <el-form-item label="到期时间:" prop="expirationTime">
          <p>{{dataForm.expirationTime}}</p>
        </el-form-item>
        <el-form-item label="开通模块:" prop="name">
          <p>{{dataForm.name}}</p>
        </el-form-item>
        <el-form-item label="续费版本:" prop="productPrice_type">
          <template slot-scope="scope">
            <el-radio-group v-model="dataForm.productPriceId" @change="change_productPrice_type">
              <el-radio
                border
                :label="item.id"
                v-for="(item, index) of dataForm.productPrice_type"
                :key="index"
              >{{item.type}}</el-radio>
            </el-radio-group>
          </template>
        </el-form-item>
        <el-form-item label="续费价格:" prop="productPrice_price">
          <p>￥ {{dataForm.productPrice_price}}</p>
        </el-form-item>
        <el-form-item label="开通时长:" prop="productPrice_day">
          <p>{{dataForm.productPrice_day}}天</p>
        </el-form-item>
      </el-form>
    </el-tabs>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import API from "@/api";
export default {
  data() {
    return {
      visible: false,
      info: {
        appid: "",
        homecode: ""
      },
      dataForm: {
        id: 0,
        // 管理员
        username: "",
        // 到期时间
        expirationTime: "",
        // 开通模块
        name: "",
        // 续费版本
        productPrice_type: [],
        // 版本价格
        productPrice_price: "",
        //当前版本id
        productPriceId: "",
        // 开通时长
        productPrice_day: "",
        buyUserId:''
      }
    };
  },
  methods: {
    init(id) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.dataForm.username = "";
      this.dataForm.expirationTime = "";
      this.dataForm.name = "";
      this.dataForm.productPrice_type = [];
      this.dataForm.productPrice_price = "";
      this.dataForm.productPrice_day = "";
      this.$nextTick(() => {
        API.miniuserproduct.info(this.dataForm.id).then(({ data }) => {
          if (data && data.code === 0) {
            console.log(data);
            this.dataForm.username = data.username;
            this.dataForm.expirationTime = data.miniUserProduct.expirationTime;
            this.dataForm.name = data.miniUserProduct.name;

            this.dataForm.productPriceId = data.miniUserProduct.productPriceId;
            this.dataForm.productPrice_type = data.productPrice;
            this.dataForm.buyUserId = data.miniUserProduct.buyUserId;

            //过滤当前版本信息
            let r = data.productPrice.filter(item => {
              return item.id == data.miniUserProduct.productPriceId;
            });
            this.dataForm.productPrice_price = r[0].price;
            this.dataForm.productPrice_day = r[0].day;
          }
        });
      });
    },
    // 表单提交
    dataFormSubmit() {
      console.log("表单提交");
      this.$nextTick(() => {
        API.miniuserproduct.renew(this.dataForm).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.visible = false;
                this.$emit("refreshDataList");
              }
            });
          } else {
            this.$message.error(data.msg);
          }
        });
      });
    },
    //续费版本 修改
    change_productPrice_type(val) {
      console.log(val);
      let _productPrice_type = this.dataForm.productPrice_type;
      let r = _productPrice_type.filter(item => {
        return item.id == val;
      });
      console.log(r);
      this.dataForm.productPrice_price = r[0].price;
      this.dataForm.productPrice_day = r[0].day;
    }
  }
};
</script>
